<template>
	<view class="dialog">
		<view class="content">
			<view class="title">
				 {{param.title}}
			</view>
			<view class="text">
				<text>{{param.content}}</text>	
			</view>
			<view class="btn-style0" v-if='!param.style'>
				<view @click.stop="cancel(param.data)"><text class="cancel">{{param.cancelText}}</text></view>
				<view @click.stop="confirm(param.data)"><text class="confirm">{{param.confirmText}}</text></view>
			</view>
			<view class="btn-style1" v-if='param.style==1'>
				<view @click.stop="cancel(param.data)"><text class="cancel">{{param.cancelText}}</text></view>
				<view @click.stop="confirm(param.data)"><text class="confirm">{{param.confirmText}}</text></view>
			</view>
			<view class="btn-style2" v-if='param.style==2'>
				<view @click.stop="confirm(param.data)"><text class="confirm">{{param.confirmText}}</text></view>
			</view>
		</view>
	</view>
</template>
    
<script>
	export default {
		props:['param'],
		data() {
			return {
			}
		},
		onLoad() {
		},
		methods: {
	        cancel:function(data){
				this.$emit('cancel',data)
			},
			confirm:function(data){
				this.$emit('confirm',data)
			}
		}
	}
</script>

<style scoped>
	*{
		margin: 0;
		padding: 0;
		list-style: none;
		box-sizing: border-box;
		font-size: 0.75rem;
		text-align: center;
	}
	.dialog{
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		background:rgba(0,0,0,0.25);
	}
	.content{
		width: 70%;
		height: 10rem;
		background-color: #FFFFFF;
		position: absolute;
		transform: translate(-50%,-50%);
		top: 50%;
		left: 50%;
		border-radius: 10px;
	}
	.title{
		height: 2rem;
		line-height: 2rem;
		font-size: 0.85rem;
		color: #999;
	}
	.text{
		position: relative;
		height: 5rem;
		overflow-y: auto;
		padding: 0.5rem 0;
	}
	.text text{
		width: 92%;
		display: block;
		position: absolute;
		transform: translate(-50%,-50%);
		top: 50%;
		left: 50%;
		font-size: 0.85rem;
	}
	.btn-style0 , .btn-style1,.btn-style2{
		height: 3rem;
	}
	.btn-style0 view,.btn-style1 view{
		float: left;
		height: 3rem;
		width: 50%;
		position: relative;
	}
	.btn-style2 view{
		height: 3rem;
		width: 100%;
		position: relative;
	}
	.btn-style1 view,.btn-style2 view{
		border-top: 1px solid #eee;
	}
	.btn-style1 view:first-child{
		border-right:1px solid #eee ;
	}
	.btn-style0 view text,.btn-style1 view text,.btn-style2 view text{
		display: inline-block;
		position: absolute;
		transform: translate(-50%,-50%);
		top: 50%;
		left: 50%;
		white-space: nowrap;
	}
	.btn-style0 .cancel{
		padding: 0.25rem 1rem;
		background: #CCC;
		color: #999;
		border-radius: 50px;
		box-shadow:0 0 5px 1px #ccc;
	}
	.btn-style0 .confirm{
		padding: 0.25rem 1rem;
		background: -webkit-linear-gradient(left,#FD6431,#FF9972);
		color: #fff;
		border-radius: 50px;
		box-shadow:0 0 5px 1px #FF9972;
	}
	.btn-style1 .cancel ,.btn-style1 .confirm{
		font-size: 0.85rem;
		font-weight: bold;
		color: #999;
	}
	.btn-style1 .confirm{
		color: #FD6431;
	}
	.btn-style2 view text{
		font-size: 0.85rem;
	}
</style>
